<!--
 * @Description  :
 * @Version      : 1.0
 * @Author       : seraph
 * @Date         : 2024-12-13 16:10:18
 * @LastEditors  : seraph
 * @LastEditTime : 2024-12-25 23:16:25
-->
<template>
  <h3>v-on 鼠标按键修饰符</h3>
  <hr />
  <h4>鼠标按键修饰符</h4>
  <h4>鼠标点击事件的修饰符。@click.xxx，不指定修饰符时，默认是单击事件。</h4>
  <ul>
    <li>.click：鼠标左键单击。</li>
    <button class="clickSpan" @click.click="handleClick">点击我</button> <span class="msgSpan2">{{ clickNum }}</span>
    <li>.right：鼠标右键单击。</li>
    <button class="clickSpan" @click.right="handleRightClick">点击我</button><span
      class="msgSpan2">{{ rightClickNum }}</span>
    <li>.middle：鼠标中键单击。</li>
    <button class="clickSpan" @click.middle.prevent="handleMiddleClick">点击我</button><span
      class="msgSpan2">{{ middleNum }}</span>
  </ul>
  <hr />
  <h4><span></span></h4>
  <h4>常用鼠标事件</h4>
  <ul>
    <li>@dblclick：鼠标左键双击。</li>
    <button class="clickSpan" @dblclick="handleDbClick">双击我</button><span class="msgSpan2">{{ dbClickNum }}</span>


    <li>@mousedown：鼠标键【左中右键均支持】按下。</li>
    <button class="clickSpan" @mousedown="handleMousedown">按下并保持</button><span
      class="msgSpan2">{{ mousedownNum }}</span>


    <li>@mouseup：鼠标键【左中右键均支持】松开。</li>
    <button class="clickSpan" @mouseup="handleMouseUp">点击我</button><span class="msgSpan2">{{ mouseupNum }}</span>


    <li>@mousemove：鼠标移动。</li>
    <button class="clickSpan" @mousemove="handleMouseMove">在上面移动</button><span
      class="msgSpan2">{{ mousemoveNum }}</span>


    <li>@mouseover：鼠标移入元素。</li>
    <h4>
      mouseover事件是当鼠标指针移入元素或其子元素时触发的。这意味着，如果鼠标指针从父元素移动到其子元素，mouseover事件将在父元素上再次触发，因为事件会冒泡。这种行为可能导致事件的重复触发。当鼠标指针离开元素时，相应的事件是mouseout。
    </h4>
    <h3 class="bg-pink" @mouseover="handleParentMouseOver"><button class="clickSpan"
        @mouseover="handleMouseOver">移入我</button><span class="msgSpan2">父：{{
          parentMouseoverNum }} 子：{{
          mouseoverNum }}</span></h3>

    <li>@mouseout：鼠标移出元素。</li>
    <h4>相同道理，当鼠标指针移出元素或其子元素时触发mouseout事件，父元素会再次触发mouseover事件，因为事件会冒泡。</h4>
    <h3 class="bg-pink" @mouseout="handleParentMouseOut"><button class="clickSpan"
        @mouseout="handleMouseOut">移出我</button><span class="msgSpan2">父：{{ parentMouseoutNum }} 子：{{ mouseoutNum
        }}</span></h3>

    <li>@mouseenter：鼠标进入元素。</li>
    <h4>
      mouseenter事件仅在鼠标指针移入元素本身时触发，而不考虑子元素。这意味着，即使鼠标指针在元素内部从一个子元素移动到另一个子元素，mouseenter事件也不会再次触发。mouseenter事件不支持事件冒泡，这使得它在某些情况下比mouseover更为适用。当鼠标指针离开元素时，相应的事件是mouseleave。
    </h4>
    <h4 class="bg-pink" @mouseenter="handleParentMouseEnter"><button class="clickSpan"
        @mouseenter="handleMouseEnter">进入我</button><span class="msgSpan2">父：{{ parentMouseenterNum }} 子：{{ mouseenterNum
        }}</span></h4>

    <li>@mouseleave：鼠标离开元素。</li>
    <h4>相同道理，当鼠标指针移出元素范围时触发mouseleave事件，当鼠标离开子元素时元素进入父元素时，不会再次触发mouseleave事件。</h4>
    <h4 class="bg-pink" @mouseleave="handleParentMouseLeave"><button class="clickSpan"
        @mouseleave="handleMouseLeave">离开我</button><span class="msgSpan2">父：{{ parentMouseleaveNum }} 子：{{ mouseleaveNum
        }}</span></h4>

    <li>@contextmenu：右键菜单。</li>
    <h4>它是当用户右键点击元素时触发的事件。通常用于自定义一个右键上下文菜单。可以使用 .prevent 修饰符阻止默认的右键菜单显示。</h4>
    <button class="clickSpan" @contextmenu.prevent="handleContextMenu">右击我</button><span
      class="msgSpan2">{{ contextmenuNum }}</span>
  </ul>
  <br>

  <h4>滚轮事件是指鼠标滚轮滚动事件。</h4>
  <h4>常用滚轮事件</h4>
  <ul>
    <li>wheel：滚轮滚动。Firefox、Chrome、Edge支持。</li>
    <h4>
      <div class="normal-scroll" @wheel.prevent="handleWheel">滚轮动我</div><span class="msgSpan2">滚动距离：{{ wheelNum
        }}</span>
    </h4>
    <li>mousewheel：鼠标滚轮滚动。Chrome、Edge支持。</li>
    <h4>
      <div class="normal-scroll" @mousewheel.prevent="handleMousewheel">鼠标滚轮动我</div><span class="msgSpan2">滚动距离：{{
        mousewheelNum }}</span>
    </h4>
    <li>DOMMouseScroll：火狐滚轮滚动。Firefox、Chrome 支持。</li>
    <h4>
      <div class="normal-scroll" @DOMMouseScroll.prevent="handleDOMMouseScroll">火狐滚轮动我</div><span
        class="msgSpan2">滚动距离：{{
          DOMMouseScrollNum }}</span>
    </h4>
  </ul>
  <br>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted, watch, computed } from 'vue'

const clickNum = ref(0)
const handleClick = (event: MouseEvent) => {
  clickNum.value++
  console.log(Date.now().toString(), 'mouse click', event.button)
}

const rightClickNum = ref(0)
const handleRightClick = (event: MouseEvent) => {
  rightClickNum.value++
  console.log(Date.now().toString(), 'right mouse click', event.button)
}

const middleNum = ref(0)
const handleMiddleClick = (event: MouseEvent) => {
  middleNum.value++
  console.log(Date.now().toString(), 'middle mouse click', event.button)
}

const dbClickNum = ref(0)
const handleDbClick = (event: MouseEvent) => {
  dbClickNum.value++
  console.log(Date.now().toString(), 'double click', event.button)
}

const mousedownNum = ref(0)
const handleMousedown = (event: MouseEvent) => {
  mousedownNum.value++
  console.log(Date.now().toString(), 'press and hold', event.button)
}

const mouseupNum = ref(0)
const handleMouseUp = (event: MouseEvent) => {
  mouseupNum.value++
  console.log(Date.now().toString(), 'click', event.button)
}

const mousemoveNum = ref(0)
const handleMouseMove = (event: MouseEvent) => {
  mousemoveNum.value++
  console.log(Date.now().toString(), 'on mouse move', event.button)
}

const parentMouseoverNum = ref(0)
const handleParentMouseOver = (event: MouseEvent) => {
  parentMouseoverNum.value++
  console.log(Date.now().toString(), 'on parent mouse over', event.button)
}

const mouseoverNum = ref(0)
const handleMouseOver = (event: MouseEvent) => {
  mouseoverNum.value++
  console.log(Date.now().toString(), 'on mouse over', event.button)
}

const parentMouseoutNum = ref(0)
const handleParentMouseOut = (event: MouseEvent) => {
  parentMouseoutNum.value++
  console.log(Date.now().toString(), 'on parent mouse leave', event.button)
}

const mouseoutNum = ref(0)
const handleMouseOut = (event: MouseEvent) => {
  mouseoutNum.value++
  console.log(Date.now().toString(), 'on mouse leave', event.button)
}

const parentMouseenterNum = ref(0)
const handleParentMouseEnter = (event: MouseEvent) => {
  parentMouseenterNum.value++
  console.log(Date.now().toString(), 'on parent mouse enter', event.button)
}

const mouseenterNum = ref(0)
const handleMouseEnter = (event: MouseEvent) => {
  mouseenterNum.value++
  console.log(Date.now().toString(), 'on mouse enter', event.button)
}

const parentMouseleaveNum = ref(0)
const handleParentMouseLeave = (event: MouseEvent) => {
  parentMouseleaveNum.value++
  console.log(Date.now().toString(), 'on parent mouse leave', event.button)
}

const mouseleaveNum = ref(0)
const handleMouseLeave = (event: MouseEvent) => {
  mouseleaveNum.value++
  console.log(Date.now().toString(), 'on mouse leave', event.button)
}



const contextmenuNum = ref(0)
const handleContextMenu = (event: MouseEvent) => {
  contextmenuNum.value++
  console.log(Date.now().toString(), 'on context menu', event.button)
}

const wheelNum = ref(0)
const handleWheel = (event: WheelEvent) => {
  wheelNum.value++
  console.log(Date.now().toString(), 'on wheel', event.deltaY)
}

const mousewheelNum = ref(0)
const handleMousewheel = (event: WheelEvent) => {
  mousewheelNum.value++
  console.log(Date.now().toString(), 'on mouse wheel', event.deltaY)
}

const DOMMouseScrollNum = ref(0)
const handleDOMMouseScroll = (event: WheelEvent) => {
  DOMMouseScrollNum.value++
  console.log(Date.now().toString(), 'on DOM mouse scroll', event.deltaY)
}
</script>

<style scoped>
/* 基础背景样式 */
.bg-pink {
  background-color: #ffb2b2;
  padding: 5px;
}

/* 按钮基础样式 */
button {
  margin-right: 10px;
  min-width: 80px;
  font-size: 16px;
  line-height: 150%;
}

/* 消息显示样式 */
.msgSpan2 {
  margin-left: 10px;
  font-size: 16px;
  color: #0400e6;
  font-weight: bolder;
}

/* 可点击元素样式 */
.clickSpan {
  display: inline-block;
  width: 100px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  background-color: #a89595;
  border: 1px solid #ccc;
  cursor: pointer;
}

.clickSpan:hover {
  background-color: #e6e6e6;
}

/* 滚动区域样式 */
.normal-scroll {
  height: 200px;
  width: 200px;
  overflow-y: scroll;
  border: 1px solid #ccc;
  padding: 10px;
}
</style>
